<template>
  <div class="bg_white" style="height: calc(100vh - 198px)">
    <a-row>
      <a-col :span="24">
        <el-input
          style="width: 150px"
          placeholder="请输入学生姓名"
          allow-clear
          size="medium"
          clearable
          v-model="studentNameInput"
        />
        <el-select
          v-model="selectSchoolCode"
          filterable
          size="medium"
          clearable
          placeholder="请选择"
          style="margin-left: 15px; width: 200px"
        >
          <el-option
            v-for="item in schoolList"
            :key="item.value"
            :label="item.ORGNAME"
            :value="item.ORGCODE"
          >
          </el-option>
        </el-select>
        <el-select
          size="medium"
          clearable
          style="width: 150px; margin: 0 15px"
          @change="handleChange"
          v-model="selectSchoolCode2"
        >
          <el-option value="2" label="全部">全部</el-option>
          <el-option value="1" label="男">男</el-option>
          <el-option value="0" label="女">女</el-option>
        </el-select>
        <el-select v-model="selectStudentStatus" placeholder="请选择状态">
          <el-option
            v-for="(item,index) in studentStatus"
            :key="index"
            :label="item.dictLabel"
            :value="item.dictCode"
          >
          </el-option>
        </el-select>
        <el-select v-model="selectClassType" style="margin-left: 15px" placeholder="请选择年级">
          <el-option
            v-for="(item,index) in classType"
            :key="index"
            :label="item.dictLabel"
            :value="item.dictCode"
          >
          </el-option>
        </el-select>
        <a-button type="primary" @click="search" style="margin-left: 15px"> 搜索 </a-button>
        <a-button type="primary" style="margin-left: 15px" @click="addStudent">
          添加学生
        </a-button>
      </a-col>
      <a-col :span="24" style="margin: 10px 0"> </a-col>
    </a-row>
    <a-drawer
      :title="title"
      placement="right"
      :closable="false"
      :visible="visible"
      :after-visible-change="afterVisibleChange"
      @close="onClose"
      width="500px"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="学生ID" prop="studentId">
          <el-input
            v-model="ruleForm.studentId"
            :disabled="addOrUpdate ? 1 : disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="学生姓名" prop="studentName">
          <el-input v-model="ruleForm.studentName"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select
            v-model="ruleForm.gender"
            placeholder="请选择学生性别"
            style="width: 100%"
          >
            <el-option label="男" :value="1 + ''"></el-option>
            <el-option label="女" :value="0 + ''"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="身份证号" prop="identityCard">
          <el-input
            v-model="ruleForm.identityCard"
            placeholder="请输入学身份证号"
          ></el-input>
        </el-form-item>
        <el-form-item label="学校名称" prop="schoolCode">
          <el-select
            v-model="ruleForm.schoolCode"
            filterable
            placeholder="请选择"
            style="width: 100%"
            :disabled="addOrUpdate ? 1 : disabled"
          >
            <el-option
              v-for="item in schoolList"
              :key="item.value"
              :label="item.ORGNAME"
              :value="item.ORGCODE"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在年级" prop="grade">
          <el-select
            v-model="ruleForm.grade"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="(item, index) in classType"
              :key="index"
              :label="item.dictLabel"
              :value="item.dictCode + ''"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="newStatus">
          <el-select
            v-model="ruleForm.newStatus"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="(item, index) in studentStatus"
              :key="index"
              :label="item.dictLabel"
              :value="item.dictCode + ''"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型" prop="studentType">
          <el-select
            v-model="ruleForm.studentType"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="(item, index) in studentType"
              :key="index"
              :label="item.dictLabel"
              :value="item.dictCode + ''"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出生日期" prop="birthday">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="ruleForm.birthday"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >提 交</el-button
          >
          <el-button @click="resetForm('ruleForm')" v-show="addOrUpdate == 0"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </a-drawer>
    <a-table
      :columns="columns"
      :pagination="false"
      :data-source="studentListInfo"
      bordered
      :rowKey="
        (record, index) => {
          return index;
        }
      "
    >
      <span slot="sex" slot-scope="text, record">
        {{ record.gender == 1 ? "男" : "女" }}
      </span>
      <span slot="cz" slot-scope="text, record">
        <a @click="actionStudent(record)">查看</a>
        <a-divider type="vertical" />
        <a @click="removeStudent(record)">删除</a>
      </span>
    </a-table>
    <a-pagination
      style="margin: 10px 0"
      v-model="current"
      :page-size-options="pageSizeOptions"
      :total="total"
      show-size-changer
      :page-size="pageSize"
      @showSizeChange="onShowSizeChange"
      @change="pageChange"
    >
      <template slot="buildOptionText" slot-scope="props">
        <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
      </template>
    </a-pagination>
  </div>
</template>

<script>
import student from "@/api/studentList";
const columns = [
  {
    title: "姓名",
    dataIndex: "student_name",
  },
  {
    title: "学校名称",
    dataIndex: "schoolName",
  },
  {
    title: "年级",
    dataIndex: "gradeName",
  },
  {
    title: "性别",
    scopedSlots: { customRender: "sex" },
  },
  {
    title: "状态",
    dataIndex: "newStatusName",
  },
  {
    title: "出生日期",
    dataIndex: "birthday",
  },
  {
    title: "操作",
    dataIndex: "cz",
    scopedSlots: { customRender: "cz" },
  },
];

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  });
}

const x = 3;
const y = 2;
const z = 1;
const gData = [];

const generateData = (_level, _preKey, _tns) => {
  const preKey = _preKey || "0";
  const tns = _tns || gData;

  const children = [];
  for (let i = 0; i < x; i++) {
    const key = `${preKey}-${i}`;
    tns.push({ title: key, key, scopedSlots: { title: "title" } });
    if (i < y) {
      children.push(key);
    }
  }
  if (_level < 0) {
    return tns;
  }
  const level = _level - 1;
  children.forEach((key, index) => {
    tns[index].children = [];
    return generateData(level, key, tns[index].children);
  });
};
generateData(z);

const dataList = [];
const generateList = (data) => {
  for (let i = 0; i < data.length; i++) {
    const node = data[i];
    const key = node.key;
    dataList.push({ key, title: key });
    if (node.children) {
      generateList(node.children);
    }
  }
};
generateList(gData);

const getParentKey = (key, tree) => {
  let parentKey;
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i];
    if (node.children) {
      if (node.children.some((item) => item.key === key)) {
        parentKey = node.key;
      } else if (getParentKey(key, node.children)) {
        parentKey = getParentKey(key, node.children);
      }
    }
  }
  return parentKey;
};
import contacts from "@/api/organizations";
export default {
  data() {
    return {
      classType: [],
      schoolList: [],
      ruleForm: {
        schoolCode: "",
        studentName: "",
        schoolName: "",
        schoolCode: "",
        grede: "",
        newStatus: "",
        studentSex: "",
        dateOfBirth: "",
        studentId: "",
        gender: "",
        schoolCode: "",
        grade: "",
        birthday: "",
        studentType: "",
        identityCard: "",
      },
      selectClassType:"",
      selectSchoolCode: "",
      selectSchoolCode2: "",
      selectSchoolName: "",
      studentStatus: [],
      studentType: [],
      selectStudentStatus:'',
      rules: {
        studentName: [
          { required: true, message: "请输入学生名称", trigger: "blur" },
          {
            min: 1,
            max: 100,
            message: "长度必须大于一个字符",
            trigger: "blur",
          },
        ],
        schoolCode: [
          { required: true, message: "请输入学校名称", trigger: "blur" },
          {
            min: 3,
            max: 100,
            message: "长度必须大于三个字符",
            trigger: "blur",
          },
        ],
        schoolCode: [
          { required: true, message: "请输入学校编码", trigger: "change" },
        ],
        grede: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个年级",
            trigger: "change",
          },
        ],
        studentSex: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个性别",
            trigger: "change",
          },
        ],
        dateOfBirth: [
          {
            type: "date",
            required: true,
            message: "请选择出生日期",
            trigger: "change",
          },
        ],
        studentId: [
          { required: true, message: "请输入学生ID", trigger: "change" },
        ],
      },
      visible: false,
      title: "",
      expandedKeys: [],
      searchValue: "",
      autoExpandParent: true,
      gData,
      data,
      columns,
      selectedRowKeys: [],
      keyWord: "",
      studentListInfo: [],
      total: 0,
      current: 1,
      pageSizeOptions: ["10", "20", "30", "40", "50"],
      pageSize: 10,
      pageNo: 1,
      studentNameInput: "",
      sexSelect: "",
      schoolNameInput: "",
      addOrUpdate: 0,
    };
  },
  computed: {
    rowSelection() {
      const { selectedRowKeys } = this;
      return {
        selectedRowKeys,
        onChange: this.onSelectChange,
        hideDefaultSelections: true,
        onSelection: this.onSelection,
      };
    },
  },
  mounted() {
    this.getType();
    this.getStatus();
    this.getClassType();
    this.showSchool();
    this.getStudentList();
  },
  methods: {
    removeStudent(val) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        student.delStudent(val.student_id).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: "删除成功",
            });
            this.getStudentList();
          }
        });
      });
    },
    actionStudent(val) {
      this.addOrUpdate = 1;
      this.visible = true;
      this.ruleForm.studentId = val.student_id;
      this.ruleForm.studentName = val.student_name;
      this.ruleForm.gender = val.gender;
      this.ruleForm.schoolCode = val.school_code;
      this.ruleForm.identityCard = val.identity_card;
      this.ruleForm.grade = val.grade;
      this.ruleForm.newStatus = val.new_status;
      this.ruleForm.studentType = val.student_type;
      this.ruleForm.birthday = val.birthday;
    },
    getType() {
      student.getStudentType().then((res) => {
        this.studentType = res.data.data.dictionaries;
      });
    },
    getStatus() {
      student.getStudentStatus().then((res) => {
        this.studentStatus = res.data.data.dictionaries;
        console.log(this.studentStatus);
      });
    },
    async getClassType() {
      await contacts.getClassType().then((res) => {
        this.classType = res.data.data.dictionaries;
      });
    },
    showSchool() {
      contacts.getSchoolList().then((res) => {
        this.schoolList = res.data.data.schools;
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.addOrUpdate == 0) {
            this.addOneStudent();
          } else {
            this.updateOneStudent();
          }
        } else {
          return false;
        }
      });
    },
    getStudentList() {
      let data = {
        page: this.current,
        size: this.pageSize,
        studentName: this.studentNameInput,
        schoolCode: this.selectSchoolCode,
        gender: this.selectSchoolCode2,
        newStatus:this.selectStudentStatus,
        grade:this.selectClassType
      };
      student.selectAllStudent(data).then((res) => {
        this.total = res.data.data.total;
        this.studentListInfo = res.data.data.students;
      });
    },
    updateOneStudent() {
      student.updateStudent(this.ruleForm).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            type: "success",
            message: "修改成功",
          });
          this.getStudentList();
          this.visible = false;
        } else if (res.data.code == 401) {
          this.$message({
            type: "error",
            message: "暂无权限",
          });
          this.visible = false;
        } else {
          this.$message({
            type: "error",
            message: "修改失败,请联系管理员",
          });
          this.visible = false;
        }
      });
    },
    addOneStudent() {
      student.insertStudent(this.ruleForm).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            type: "success",
            message: "添加成功",
          });
          this.visible = false;
          this.getStudentList();
        } else if (res.data.code == 401) {
          this.$message({
            type: "error",
            message: "暂无权限",
          });
          this.visible = false;
        } else {
          this.$message({
            type: "error",
            message: "添加失败暂无权限",
          });
          this.visible = false;
        }
      });
    },
    resetForm() {
      this.$refs.ruleFormmm.clearValidate();
    },
    addStudent() {
      this.addOrUpdate = 0;
      this.title = "添加学生";
      this.visible = true;
      if (this.$refs.ruleFormmm) {
        this.$refs.ruleFormmm.clearValidate(); //移除该表单项的校验结果
      }
    },
    onClose() {
      this.ruleForm.studentId = "";
      this.ruleForm.studentName = "";
      this.ruleForm.gender = "";
      this.ruleForm.schoolCode = "";
      this.ruleForm.identityCard = "";
      this.ruleForm.grade = "";
      this.ruleForm.newStatus = "";
      this.ruleForm.studentType = "";
      this.ruleForm.birthday = "";
      this.visible = false;
    },
    search() {
      this.getStudentList();
    },
    handleChange(value) {
      console.log(value);
      this.selectSchoolCode2 = value;
    },
    pageChange() {
      this.getStudentList();
    },
    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize;
      this.getStudentList();
    },
    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize;
      this.getStudentList();
    },
    // getStudentListInfo() {
    //   let data = {
    //     page: this.current,
    //     size: this.pageSize,
    //     name: this.studentNameInput,
    //     schoolName: this.schoolNameInput,
    //     sex: this.sexSelect,
    //   };
    //   student.getStudentInfo(data).then((res) => {
    //     this.studentListInfo = res.data.data;
    //     this.total = res.data.total.total;
    //   });
    // },
  },
};
</script>

<style lang="less" scoped>
.ant-layout-header {
  background: #03212100 !important;
}

.vtl {
  .vtl-drag-disabled {
    background-color: #d0cfcf;

    &:hover {
      background-color: #d0cfcf;
    }
  }

  .vtl-disabled {
    background-color: #d0cfcf;
  }
}
</style>
